<template>
  <div class="page_space btn_space">
    <p class="title_1">基本信息</p>
    <base-card v-if="baseInfo.length > 0" :data="baseInfo" />

    <p class="title_1">资质信息</p>
    <p v-if="qualificationList.length === 0">暂无信息</p>
    <template v-else>
      <card-wrap
        v-for="(item, index) in qualificationList"
        :key="index"
        :title="item.fieldName"
      >
        <card-item title="资质类型">{{ item.type }}</card-item>
        <card-item title="有效期"
          >{{ item.startDate }} - {{ item.endDate }}</card-item
        >
        <card-item title="资质文件">
          <fileUpload :imgId="item.fileId" onlyRead />
        </card-item>
      </card-wrap>
    </template>

    <div class="btn_wrap">
      <button
        :class="enabled ? 'btn danger middle' : 'btn default middle'"
        @click="enableOrDisable"
      >
        {{ enabled ? '停用' : '启用' }}
      </button>
      <button
        class="btn middle"
        @click="goto('/add-person?id=' + personId + '&type=update')"
      >
        编辑
      </button>
    </div>
  </div>
</template>

<script>
import baseCard from '@/components/base-card'
import cardWrap from '@/components/base-card/wrap'
import cardItem from '@/components/base-card/item'
import fileUpload from '@/components/file-upload'
import { getPersonDetail, enableOrDisable } from '@/api/person'
import { getFile } from '@/api/base'
export default {
  name: 'personDetails',
  components: { baseCard, fileUpload, cardWrap, cardItem },
  data() {
    return {
      // 展示资质信息
      showQualification: false,
      baseInfo: [],
      qualificationList: [],
      personId: '',
      getFile: getFile,
      enabled: ''
    }
  },
  created() {
    this.getPersonDetail()
  },
  methods: {
    async getPersonDetail() {
      let id = this.$route.query.id
      this.personId = id
      const { code, data } = await getPersonDetail(id)
      if (code === '0') {
        this.enabled = data.enabled
        this.baseInfo = [
          {
            key: '人员姓名',
            value: data.name
          },
          {
            key: '人员编号',
            value: data.code
          },
          {
            key: '所属区划',
            value: data.allAreaName
          },
          {
            key: '所属部门',
            value: data.departmentName
          },
          {
            key: '角色',
            value: data.roleName
          },
          {
            key: '联系电话',
            value: data.contactsTel
          },
          {
            key: '身份证号',
            value: data.identityNumber
          },
          {
            key: '性别',
            value: data.gender === 'man' ? '男' : '女'
          },
          {
            key: '备注',
            value: data.description
          }
        ]
        this.qualificationList = data.qualificationList
      }
    },
    // 启用或禁用
    async enableOrDisable() {
      let title = this.enabled ? '是否停用？' : '是否启用？'
      this.$dialog
        .alert({
          title,
          showCancelButton: true
        })
        .then(async () => {
          // on close
          const { code } = await enableOrDisable(this.personId)
          if (code === '0') {
            this.$toast.success('操作成功')
            this.getPersonDetail()
          } else {
            console.log('fail')
          }
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}
</script>

<style scoped lang="scss"></style>
